<template >
  <div class="modal-w">
    <div class="head">
      <div class="headitem left">
        <div class="titleinfo">
          <div class="title">常态体征</div>
          <div class="value">66</div>
          <div class="unit">项</div>
        </div>
      </div>
      <div class="headitem right">
        <div class="titleinfo">
          <div class="title">体征发现</div>
          <div class="value">450</div>
          <div class="unit">条</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="left-l">
          <div class="iconcontent">
            <!-- 74 * 84 总宽度84 -->
            <div class="menuicon menuicon1" @click="selectMenu('chengshizhisheng')">
              <img src="@/assets/icon11.png" class="base" alt="icon" />
              <img src="@/assets/icon8.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市之声</div>
            </div>
            <div class="menuicon menuicon2" @click="selectMenu('chengshizhigan')">
              <img src="@/assets/icon11.png" class="base" alt="icon" />
              <img src="@/assets/icon6.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市之感</div>
            </div>
            <div class="menuicon menuicon3" @click="selectMenu('chengshihuxi')">
              <img src="@/assets/icon11.png" class="base" alt="icon" />
              <img src="@/assets/icon2.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市呼吸</div>
            </div>
            <div class="menuicon menuicon4" @click="selectMenu('chengshimaibo')">
              <img src="@/assets/icon11.png" class="base" alt="icon" />
              <img src="@/assets/icon4.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市脉搏</div>
            </div>
            <div class="menuicon menuicon5" @click="selectMenu('chengshizhiyan')">
              <img src="@/assets/icon11.png" class="base" alt="icon" />
              <img src="@/assets/icon10.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市之眼</div>
            </div>
          </div>
        </div>
        <div class="left-r">
          <slot name="changtai" :menuitem="menuitem">a</slot>
        </div>
      </div>
      <div class="right">
        <div class="right-t">
          <pie :dataitems="dataitems" />
        </div>
        <forms class="right-b" :fromsData="fromsData"></forms>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import pie from '@/components/pie.vue'
import forms from "../forms.vue";
import '../../font/bebas/bebas.css'
import { ref, reactive } from 'vue';
export default {

  components: {
    pie,
    forms
  },
  setup(props) {
    let dataitems = reactive([
      {
        name: '智联',
        value: 25,
        unit: '条'
      },
      {
        name: '主动',
        value: 412,
        unit: '条'
      },
      {
        name: '被动',
        value: 13,
        unit: '条' 
      },
    ])
    const fromsData: any = [
      {time:'2021/5/16',text:'违法排污监测', address:'曲阳公园内湖-PH浮标',state:'待处置',type:'智联'},
      {time:'2021/5/16',text:'违法排污监测', address:'南泗塘-安汾路-PH浮标',state:'待处置',type:'智联'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'居家隔离人员确认', address:'辉河路43弄3号1204室',state:"待处置",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路948号白金湾',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'闵行路130弄1-5号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'四川北路1857号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'天宝路72号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'天宝路80号嘉兴路街道社区服务中心',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1215号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'大连路919弄乾鸿苑',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'高阳路388弄2号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'逸仙路520号上海市第一建筑有限公司第一分公司',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'大名路127号丰裕餐饮',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'旧改征收', address:'虹口区惠民路73弄32号',state:"未接单",type:'被动'},
      {time:'2021/5/16',text:'非机动车停放', address:'虹关路338号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'共享单车乱停放', address:'塘沽路463号华虹国际大厦',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'闵行路130弄1-5号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'违法排污监测', address:'曲阳公园内湖-PH浮标',state:"已结案",type:'智联'},
      {time:'2021/5/16',text:'非机动车停放', address:'花园路168弄1-25号彩虹名邸',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放', address:'花园路168弄1-25号彩虹名邸',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'违法排污监测', address:'南泗塘-安汾路-PH浮标',state:"已结案",type:'智联'},
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路1211号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'居委管理', address:'中山北二路1631号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路1215号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路1211号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'居委管理'	, address:'中山北一路880号曲阳公园',state:"待处置",type:'主动'},
      {time:'2021/5/16',text:'居委管理'	, address:'曲阳路630弄4号赤峰小区',state:"待处置",type:'主动'},
      {time:'2021/5/16',text:'', address:'虹口区北外滩区域西村居委',state:"待处置",type:'被动'},	
      {time:'2021/5/16',text:'非机动车停放'	, address:'曲阳路500号-1临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'房屋管理'	, address:'虹口区霍山路136号',state:"待处置",type:'被动'},	
      {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙路450号老上海菜馆',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'花园路168弄1号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'花园路168弄1号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'花园路168弄1号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'塘沽路300号上海市虹口区四川北路街道社区卫生服务中心',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路2345号上海烟草集团欣兴网络专卖店',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'噪声污染'	, address:'虹口区中西医结合医院',state:"未接单",type:'被动'},	
      {time:'2021/5/16',text:'居委管理'	, address:'玉田路311弄12号玉田小区',state:"待处置",type:'主动'},
      {time:'2021/5/16',text:'共享单车乱停放'	, address:'西江湾路229弄1-7号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'天潼路371号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东宝兴路 893号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'共享单车乱停放'	, address:'中山北一路82号-5临',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'大名路137号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'武进路199弄10-15号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙458弄1-8号 新海城',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'住宅小区里废弃非机动车辆'	, address:'东江湾190号(东江湾路空间188创意产业园)',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东江湾路190号(东江湾路空间188创意产业园)',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东江湾路190号(东江湾路空间188创意产业园)',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'花园路8号玲珑面馆',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路500号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路500号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'塘沽路2号上海顺启机电设备有限公司',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东体育会路442号巴麦隆自助烤肉',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路1878号上海市第一人民医院分院(虹口区江湾医院)',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路1878号上海市第一人民医院分院(虹口区江湾医院)',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路1878号上海市第一人民医院分院(虹口区江湾医院)',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'广纪路501号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'吴淞路590上海振华机电产品经营部',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'大名路127丰裕餐饮',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'违法排污监测'	, address:'曲阳公园内湖-PH浮标',state:"已结案",type:'智联'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙路520号上海市第一建筑有限公司第一分公司',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'唐山路455号澄衷中学',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路948号白金湾',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'道路、广场等公共场所废弃机动车辆'	, address:'东长治路515号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'飞虹路161号四海便利',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙路450号老上海菜馆',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'违法排污监测'	, address:'南泗塘-安汾路-PH浮标',state:"已结案",type:'智联'},
      {time:'2021/5/16',text:'非机动车停放'	, address:'曲阳路1号(邮电新村地铁站2号口)',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'居委管理'	, address:'玉田路311弄22号玉田小区',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'共享单车乱停放', address:'巴林路12号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'非机动车停放', address:'广纪路91号喜年来豆浆',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路28号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路40弄',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'居委管理', address:'玉田路311弄11号玉田小区',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'非机动车停放', address:'大名路86号东北人',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路43弄',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路50号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'非机动车停放', address:'东大名路591号',state:"已结案",type:'主动'},
      {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路52号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路60号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路45号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'堆料堆物', address:'伊敏河路67号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'公共区域堆放物品', address:'巴林路36号',state:"待处置",type:'主动'},	
      {time:'2021/5/16',text:'暴露垃圾', address:'伊敏河路67号',state:"待处置",type:'主动'},
      {time:'2021/5/16',text:'共享单车乱停放', address:'塘沽路463号华虹国际大厦',state:"已结案",type:'主动'},

      // {time:'2021/5/16',text:'违法排污监测', address:'曲阳公园内湖-PH浮标',state:'3'},
      // {time:'2021/5/16',text:'违法排污监测', address:'南泗塘-安汾路-PH浮标',state:'3'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:'4'},
      // {time:'2021/5/16',text:'居家隔离人员确认', address:'辉河路43弄3号1204室',state:'3'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路948号白金湾',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'闵行路130弄1-5号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'四川北路1857号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1062弄1号临江小区',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'天宝路72号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'天宝路80号嘉兴路街道社区服务中心',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1215号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'大连路919弄乾鸿苑',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'高阳路388弄2号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'逸仙路520号上海市第一建筑有限公司第一分公司',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'大名路127号丰裕餐饮',state:'4'},
      // {time:'2021/5/16',text:'旧改征收', address:'虹口区惠民路73弄32号',state:'3'},
      // {time:'2021/5/16',text:'非机动车停放', address:'虹关路338号',state:'4'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'塘沽路463号华虹国际大厦',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'闵行路130弄1-5号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'峨眉路282号临',state:'4'},
      // {time:'2021/5/16',text:'违法排污监测', address:'曲阳公园内湖-PH浮标',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'花园路168弄1-25号彩虹名邸',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'花园路168弄1-25号彩虹名邸',state:'4'},
      // {time:'2021/5/16',text:'违法排污监测', address:'南泗塘-安汾路-PH浮标',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路1211号',state:'4'},
      // {time:'2021/5/16',text:'居委管理', address:'中山北二路1631号',state:'3'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路1215号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路1211号',state:'4'},
      // {time:'2021/5/16',text:'居委管理'	, address:'中山北一路880号曲阳公园',state:'3'},
      // {time:'2021/5/16',text:'居委管理'	, address:'曲阳路630弄4号赤峰小区',state:'3'},
      // {time:'2021/5/16',text:'', address:'虹口区北外滩区域西村居委',state:'3'},	
      // {time:'2021/5/16',text:'非机动车停放'	, address:'曲阳路500号-1临',state:'4'},
      // {time:'2021/5/16',text:'房屋管理'	, address:'虹口区霍山路136号',state:'3'},	
      // {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙路450号老上海菜馆',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'花园路168弄1号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'花园路168弄1号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'花园路168弄1号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'塘沽路300号上海市虹口区四川北路街道社区卫生服务中心',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路2345号上海烟草集团欣兴网络专卖店',state:'4'},
      // {time:'2021/5/16',text:'噪声污染'	, address:'虹口区中西医结合医院',state:'3'},	
      // {time:'2021/5/16',text:'居委管理'	, address:'玉田路311弄12号玉田小区',state:'3'},
      // {time:'2021/5/16',text:'共享单车乱停放'	, address:'西江湾路229弄1-7号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'天潼路371号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东宝兴路 893号',state:'4'},
      // {time:'2021/5/16',text:'共享单车乱停放'	, address:'中山北一路82号-5临',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'大名路137号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'武进路199弄10-15号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙458弄1-8号 新海城',state:'4'},
      // {time:'2021/5/16',text:'住宅小区里废弃非机动车辆'	, address:'东江湾190号(东江湾路空间188创意产业园)',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东江湾路190号(东江湾路空间188创意产业园)',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东江湾路190号(东江湾路空间188创意产业园)',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'花园路8号玲珑面馆',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路500号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路500号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'塘沽路2号上海顺启机电设备有限公司',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东体育会路442号巴麦隆自助烤肉',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路1878号上海市第一人民医院分院(虹口区江湾医院)',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路1878号上海市第一人民医院分院(虹口区江湾医院)',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'四川北路1878号上海市第一人民医院分院(虹口区江湾医院)',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'广纪路501号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'吴淞路590上海振华机电产品经营部',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'大名路127丰裕餐饮',state:'4'},
      // {time:'2021/5/16',text:'违法排污监测'	, address:'曲阳公园内湖-PH浮标',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙路520号上海市第一建筑有限公司第一分公司',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'唐山路455号澄衷中学',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'东大名路948号白金湾',state:'4'},
      // {time:'2021/5/16',text:'道路、广场等公共场所废弃机动车辆'	, address:'东长治路515号',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'飞虹路161号四海便利',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'逸仙路450号老上海菜馆',state:'4'},
      // {time:'2021/5/16',text:'违法排污监测'	, address:'南泗塘-安汾路-PH浮标',state:'4'},
      // {time:'2021/5/16',text:'非机动车停放'	, address:'曲阳路1号(邮电新村地铁站2号口)',state:'4'},
      // {time:'2021/5/16',text:'居委管理'	, address:'玉田路311弄22号玉田小区',state:'3'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'巴林路12号',state:'3'},
      // {time:'2021/5/16',text:'非机动车停放', address:'广纪路91号喜年来豆浆',state:'4'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路28号',state:'3'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路40弄',state:'3'},
      // {time:'2021/5/16',text:'居委管理', address:'玉田路311弄11号玉田小区',state:'3'},
      // {time:'2021/5/16',text:'非机动车停放', address:'大名路86号东北人',state:'4'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路43弄',state:'3'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路50号',state:'3'},
      // {time:'2021/5/16',text:'非机动车停放', address:'东大名路591号',state:'4'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路52号',state:'3'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路60号',state:'3'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'辉河路45号',state:'3'},
      // {time:'2021/5/16',text:'堆料堆物', address:'伊敏河路67号',state:'3'},
      // {time:'2021/5/16',text:'公共区域堆放物品', address:'巴林路36号',state:'3'},
      // {time:'2021/5/16',text:'暴露垃圾', address:'伊敏河路67号',state:'3'},
      // {time:'2021/5/16',text:'共享单车乱停放', address:'塘沽路463号华虹国际大厦',state:'4',type:'主动'},

    ]

    // menu 管理
    let menuitem = ref('chengshizhisheng');

    // 切换图标事件
    let selectMenu = (itemname) => {
      menuitem.value = itemname;

      // provide('itemname', itemname)
    }

    return {
      dataitems,
      fromsData: reactive(fromsData),
      selectMenu,
      menuitem
    }

  }
}
</script>
<style lang="less" scoped>
.modal-w {
  border-radius: 10px;
  width: 1000px;
  height: 600px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #011115;

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
}

.head {
  height: 80px;
  /*border-bottom: 1px dashed red;*/

  .headitem {
    width: 50%;
    height: 100%;
    float: left;
    padding-left: 20px;
    /*border: 1px dashed green;*/

    position: relative;

    .titleinfo {
      height: 40px;
      line-height: 40px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      // border: 1px solid red;

      .title {
        float: left;
        height: 36px;
        color: #fff;
        font-size: 36px;
      }
      .value {
        float: left;
        font-size: 28px;
        line-height: inherit;
        color: #13f2f1;
        margin-left: 28px;
        line-height: 26px;
        font-family: 'bebas';
      }

      .unit {
        float: left;
        font-size: 28px;
        line-height: inherit;
        color: #ccc;
        margin-left: 20px;
        line-height: 26px;
      }
    }
  }
}

.content {
  height: 520px;
  padding-top: 20px;
  padding-bottom: 20px;
  // border: 1px dashed green;

  .left {
    height: 100%;
    width: 50%;
    float: left;
    /*border: 1px dashed green;*/
    display: flex;

    .left-l {
      width: 100px;
      /*border: 1px dashed red;*/
      height: 100%;

      .iconcontent {
        width: 100%;
        height: 100%;
        // border: 1px solid red;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        .menuicon {
          height: 84px;
          width: 74px;
          // border: 1px dashed green;
          text-align: center;
          position: relative;
          padding-top: 10px;

          .base {
            width: 50px;
            height: 50px;
            position: absolute;

            left: 50%;
            transform: translate(-50%, 0);
          }

          .iconx {
            // width: 50px;
            // height: 50px;
            position: absolute;
            top: 34px;
            left: 50%;
            transform: translate(-50%, -12px);
          }

          .menuicontitle {
            font-size: 14px;
            font-weight: 600;
            /*#02f6ff*/
            color: #b5bfcc;
            position: absolute;
            bottom: 0;
            left: 10px;
          }
        }
      }
      .menuicon1 {
      }
    }
    .left-r {
      flex: 1;
      /*border: 1px dashed red;*/
      // padding-left: 20px;
      // padding-right: 20px;
    }
  }
  .right {
    height: 100%;
    width: 50%;
    float: left;
    /*border: 1px dashed green;*/
    /*border-left: 1px dashed #ccc;*/
    display: flex;
    flex-direction: column;

    .right-t {
      height: 168px;
      /*border: 1px dashed red;*/
    }

    .right-b {
      flex: 1;
      /*border: 1px dashed red;*/
      overflow: hidden;
    }
  }
}
</style>